<template>
  <div class="dragon-boat-container">
    <!-- 广东主图展示 -->
    <el-card class="main-card">
      <div class="main-image-container">
        <el-image :src="require('@/assets/广东.png')" fit="contain" class="main-image"></el-image>
        
        <!-- 地区选择按钮组 -->
        <div class="region-buttons">
          <el-button 
            v-for="region in regions" 
            :key="region.value" 
            :type="activeRegion === region.value ? 'primary' : ''"
            @click="changeRegion(region.value)"
            round
            class="region-button"
          >
            {{ region.label }}
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 地区详情展示 -->
    <el-card class="region-card" v-if="activeRegion">
      <div slot="header">
        <span>{{ getRegionName(activeRegion) }}龙舟活动与景点</span>
      </div>
      
      <div class="region-content">
        <el-image 
          :src="getRegionImage(activeRegion)" 
          fit="contain" 
          class="region-image"
          v-if="showRegionImage"
        ></el-image>
        
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeRegion: null,
      showRegionImage: true,
      regions: [
        { label: '珠三角', value: 'zhujiang' },
        { label: '粤东', value: 'yuedong' },
        { label: '粤北', value: 'yuebei' },
        { label: '粤西', value: 'yuexi' }
      ],
      regionContents: {
        zhujiang: {
          name: '珠三角',
          image: require('@/assets/珠三角.png'),
          content: ``
        },
        yuedong: {
          name: '粤东',
          image: require('@/assets/粤东.png'),
          content: ``
        },
        yuebei: {
          name: '粤北',
          image: require('@/assets/粤北.png'),
          content: ``
        },
        yuexi: {
          name: '粤西',
          image: require('@/assets/粤西.png'),
          content: ``
        }
      }
    }
  },
  methods: {
    changeRegion(region) {
      this.activeRegion = region;
      // 这里可以添加获取地区数据的逻辑
    },
    getRegionName(region) {
      return this.regionContents[region]?.name || '';
    },
    getRegionImage(region) {
      return this.regionContents[region]?.image || '';
    },
    getRegionContent(region) {
      return this.regionContents[region]?.content || '';
    }
  }
}
</script>

<style scoped>
.dragon-boat-container {
  padding: 20px;
}

.main-card {
  margin-bottom: 20px;
  position: relative;
}

.main-image-container {
  position: relative;
  width: 100%;
  height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-image {
  width: 100%;
  height: 100%;
  max-width: 800px;
  object-fit: contain;
}

.region-buttons {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  justify-content: center;
}

.region-button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: bold;
  background-color: rgba(37, 241, 125, 0.421);
}

.region-card {
  margin-top: 20px;
}

.region-content {
  width: 100%;
  min-height: 400px;
  display: flex;
  justify-content: center;
}

.region-image {
  width: 100%;
  max-width: 900px;
  height: auto;
}

.region-text {
  padding: 20px;
  line-height: 1.6;
}

h3, h4 {
  color: #90ff4073;
  margin: 15px 0 10px;
}

ul {
  padding-left: 20px;
}

@media (max-width: 768px) {
  .main-image-container {
    height: 400px;
  }
  
  .region-buttons {
    bottom: 20px;
    gap: 8px;
  }
  
  .region-button {
    padding: 8px 16px;
    font-size: 14px;
  }
}
</style>